<template>
    <view id="app">
        <canvas type="2d" id="canvasCircle" :style="{ width: styleWidth + 'px', height: styleHeight + 'px'}">
        </canvas>
        <view class="content">新版canvas绘制有重绘的情况</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                canvasWidth: 300, //画布尺寸px
                canvasHeight: 150, //画布尺寸 px
                styleWidth: 300, //画板尺寸 px
                styleHeight: 150, //画板尺寸 px
                defaultCanvasW: 300,
                defaultCanvasH: 150,
            };
        },
        mounted() {
            this.setCanvasStyleSize();
            this.drawCircle();
            setTimeout(() => {
                this.drawCircle();
            }, 2000)
        },
        methods: {
            /**
             * 如何正确设置canvas尺寸，以及如何在高分辨率屏幕上清晰显示canvas图形 ：
             *         -- https://segmentfault.com/a/1190000020189168
             * */
            setCanvasStyleSize() {
                let windowInfo = uni.getWindowInfo();
                let ratio = windowInfo.windowWidth / 300; //计算屏幕宽度和 canvas 默认尺寸的比例
                this.styleWidth = windowInfo.windowWidth;
                this.styleHeight *= ratio;
                console.log(`%cstyleWidth:${this.styleWidth}px, styleHeight:${this.styleHeight}px`, "color:yellow");
            },
            drawCircle() {
                // 点的坐标要用 canvasWidth 确定，而不是 styleWidth
                // 如果有重绘的话，canvas.width 会变，而点的坐标固定的和300*150比较，所以点的坐标最好另存一个变量
                let pointO = {
                    x: this.defaultCanvasW / 2,
                    y: this.defaultCanvasH / 2
                };
                console.log(`%cx:${pointO.x}, y:${pointO.y}`, "color:green;font-size:large");

                wx.createSelectorQuery()
                    .in(this)
                    .select('#canvasCircle')
                    .fields({
                        node: true,
                        size: true
                    })
                    .exec((res) => {
                        const canvas = res[0].node;
                        const ctx = canvas.getContext('2d');

                        // Canvas 画布的实际绘制宽高
                        const width = res[0].width; //画布尺寸 300
                        const height = res[0].height; //画布尺寸 150
                        console.log("width:", width, " height:", height);
                        // 初始化画布大小
                        const dpr = wx.getWindowInfo().pixelRatio;
                        console.log("dpr：", dpr);
                        canvas.width = this.defaultCanvasW * dpr; //设置画布尺寸
                        canvas.height = this.defaultCanvasH * dpr; //设置画布尺寸
                        ctx.scale(dpr, dpr); 
                        console.log("canvas.width:", canvas.width, " canvas.height:", canvas.height);
                        
                        drawCircle(ctx);//一定要放在 ctx.scale(dpr, dpr); 之后，
                    })

                function drawCircle(ctx) {
                    // 画圆心
                    ctx.beginPath();
                    ctx.arc(pointO.x, pointO.y, 5, 0, 2 * Math.PI);
                    ctx.fillStyle = "red";
                    ctx.fill();
                }
            }
        }
    }
</script>

<style scoped>
    #app {
        position: relative;
    }

    canvas {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        background-color: rgba(173, 216, 230, 0.5);
    }

    .content {
        position: absolute;
        z-index: 1;
        /* right: 0; */
    }
</style>